<template>
  <div class="component-shadow-picker">
    <div class="shadow-item">
      <span>阴影颜色:</span>
      <div class="shadow-component">
        <color-picker v-model="color" @change="v => updateValue(v, 3)"></color-picker>
      </div>
    </div>
    <div class="shadow-item">
      <span>阴影大小:</span>
      <div class="shadow-component">
        <el-slider v-model="sizes" :min="0" :max="20" @input="v => updateValue(v, [0, 1])"></el-slider>
      </div>
    </div>
    <div class="shadow-item">
      <span>阴影模糊:</span>
      <div class="shadow-component">
        <el-slider v-model="blur" :min="0" :max="20" @input="v => updateValue(v, 2)"></el-slider>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = withDefaults(defineProps<{ modelValue: string }>(), {})

const emit = defineEmits(['change'])
const color = ref('')
const sizes = ref(0)
const blur = ref(0)

const values = computed(() => {
  // 10px 10px 0px red;
  // 第一个位置和第二个位置是阴影大小 sizes
  // 第三个位置是阴影模糊 blur
  // 最后一个位置是阴影颜色
  return props.modelValue.split(' ')
})

// const color = computed(() => values[3])
// const sizes = computed(() => parseInt(values[0]))
// const blur = computed(() => parseInt(values[2]))

watch(
  values,
  () => {
    const valueArray = props.modelValue.split(' ')
    sizes.value = parseInt(valueArray[0])
    blur.value = parseInt(valueArray[2])
    color.value = valueArray[3]
  },
  { immediate: true }
)

const updateValue = (newValue: number | string | number[], index: number | number[]) => {
  const newValues = computed(() => {
    return values.value.map((item, i) => {
      if (typeof index === 'number' && i === index) {
        return typeof newValue === 'number' ? newValue + 'px' : newValue
      } else if (Array.isArray(index) && index.includes(i)) {
        return typeof newValue === 'number' ? newValue + 'px' : newValue
      } else {
        return item
      }
    })
  })
  emit('change', newValues.value.join(' '))
}
</script>
<style lang="scss" scoped>
.shadow-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.shadow-item span {
  width: 28%;
}
.shadow-component {
  width: 70%;
}
</style>
